<template>
    <div class="root-lay">
        <!-- 打印 、 编辑、 装置名称那栏目 坑坑坑~~~~~~~~~~ -->
        <div class="title-view">
            <div class="top-btn-view">
                <div class="btn-box">
                    <div v-for="(downItem, index) in topYLBtnDownList" :key="index">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                <button @click="BtnActive(index)" :class="index == downBtnActiveX
                                    ? 'tab-btn downBtnActive'
                                    : 'tab-btn'
                                    ">
                                    {{ downItem.topBtnName }}
                                </button>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="(
                                        dropdownItem, dropdownIndex
                                    ) in downItem.downList" :key="dropdownIndex" @click.native="
                                        dropDownMenu(
                                            dropdownItem,
                                            downItem.type
                                        )
                                        ">
                                    <button :disabled="!dropdownItem.disabled" class="drop-btn">
                                        {{ dropdownItem.itemName }}
                                    </button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
                <div class="bottom">
                    <div class="bottom-left-view">
                        <div class="b-input">
                            <div class="b-input-label">
                                {{ $t("message.bhView.label.Plant") }}
                            </div>
                            <el-input v-model="$store.state.pidPlantName" class="selectInput" readonly></el-input>
                        </div>
                        <div class="b-input">
                            <div class="b-input-label">
                                {{ $t("message.bhView.label.jqName") }}
                            </div>
                            <el-input v-model="$store.state.pidMacNameb" clearable :placeholder="$t('message.bhView.label.placeholder')
                                " class="selectInput" readonly></el-input>
                            <el-input v-model="$store.state.pidMacName" clearable :placeholder="$t('message.bhView.label.placeholder')
                                " class="selectInput selectInputlong" readonly></el-input>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-container">
            <left-content ref="leftContent" class="left-conent"></left-content>

            <div class="svg_content" id="svg_touch">
                <VueDragResize ref="dragable" :resizable="false" :sticks="false" @dragstop="onDragstop"
                    @dragging="onDrag">
                    <div class="svg_p" id="dragDiv" v-html="svgData"></div>
                </VueDragResize>

                <!-- <div class="foot_btn">
                    <i
                        class="iconfont icon-enlarge"
                        :style="
                            svgCurrentScale.scale == 1400 ? 'color:#93ABCC' : ''
                        "
                        @click="scaleSvg(true)"
                    ></i>
                    <span @click="reset()">{{
                        "1 : " +
                        (svgCurrentScale.scale
                            ? svgCurrentScale.scale / 100
                            : "")
                    }}</span>
                    <i
                        class="iconfont icon-narrow"
                        :style="
                            svgCurrentScale.scale == 100 ? 'color:#93ABCC' : ''
                        "
                        @click="scaleSvg(false)"
                    ></i>
                </div> -->

                <pidRightPropView v-if="selectElement" class="right-view" :selectElement="selectElement" />
            </div>
        </div>
    </div>
</template>

<script>
import LeftContent from "./leftContent";
import VueDragResize from "vue-draggable-resizable";
import $solway_z from "@/utils/zoom.js";
import pidRightPropView from "./pidRightPropView.vue";

export default {
    // 注册组件
    components: {
        "left-content": LeftContent,
        "VueDragResize": VueDragResize,
        "pidRightPropView": pidRightPropView,
    },

    data() {
        //数据
        return {
            // pfd 下拉菜单
            activeName: "pfd",

            downBtnActiveX: null,
            downBtnActive: null,

            topYLBtnDownList: [
                {
                    topBtnName: this.$t(
                        "message.bhView.topBtnDownList.printing"
                    ),
                    type: "YL",
                    downList: [
                        {
                            itemName: this.$t(
                                "message.bhView.topBtnDownList.print_preview"
                            ),
                            disabled: false,
                        },
                    ],
                },
                {
                    topBtnName: this.$t(
                        "message.bhView.topBtnDownList.reading"
                    ),
                    type: "YL",
                    downList: [
                        {
                            itemName: this.$t(
                                "message.reading.cadView.contextMenu.menu0"
                            ),
                            disabled: false,
                        },
                        {
                            itemName: this.$t(
                                "message.reading.cadView.contextMenu.menu1"
                            ),
                            disabled: false,
                        },
                        {
                            itemName: this.$t(
                                "message.reading.cadView.contextMenu.menu2"
                            ),
                            disabled: true,
                        },
                        {
                            itemName: this.$t(
                                "message.reading.cadView.contextMenu.menu3"
                            ),
                            disabled: false,
                        },
                        {
                            itemName: this.$t(
                                "message.reading.cadView.contextMenu.menu4"
                            ),
                            disabled: true,
                        },
                        {
                            itemName: this.$t(
                                "message.reading.cadView.contextMenu.menu5"
                            ),
                            disabled: true,
                        },
                        {
                            itemName: this.$t(
                                "message.reading.cadView.contextMenu.menu6"
                            ),
                            disabled: false,
                        },
                        {
                            itemName: this.$t(
                                "message.reading.cadView.contextMenu.menu7"
                            ),
                            disabled: true,
                        },
                    ],
                },
                {
                    topBtnName: this.$t("message.bhView.topBtnDownList.data"),
                    type: "YL",
                    downList: [
                        {
                            itemName: this.$t(
                                "message.bhView.topBtnDownList.sort"
                            ),
                            disabled: false,
                        },
                        {
                            itemName: this.$t(
                                "message.bhView.topBtnDownList.screen"
                            ),
                            disabled: false,
                        },
                    ],
                },
                {
                    topBtnName: this.$t("message.bhView.topBtnDownList.view"),
                    type: "YL",
                    downList: [
                        {
                            itemName: this.$t(
                                "message.bhView.topBtnDownList.selectDisplayItems"
                            ),
                            disabled: true,
                        },
                    ],
                },
            ],

            // svgData
            svgData: null,
            svgCurrentScale: {},
            svgZoom: null,

            selArr: [],

            selectElement: null,
        };
    },

    methods: {
        onDragstop() {
            document.getElementById('zoomSvg').style.top = '0'
        },

        onDrag() {
            document.getElementById('zoomSvg').style.top = '0'
        },

        readXML(url) {
            $.ajax(url).then((res) => {
                this.svgData = res.getElementsByTagName("svg")[0].outerHTML;
            });
        },

        reset() {
            this.$refs.dragable.top = 0;
            this.$refs.dragable.left = 0;
            this.svgZoom.scale((100 - this.svgCurrentScale.scale) / 100);
        },

        setEleColor(val, color, event, bg, strokeWidth, flag) {
            document.getElementById('zoomSvg').style.top = '0'
            let b = document.getElementById(val);
            let a = "";
            let e = "";
            if (b.getElementsByTagName("path")) {
                a = b.getElementsByTagName("path");
                e = b.getElementsByTagName("text");
            }
            let c = b.querySelector("ellipse");
            let d = b.querySelector("rect");
            if (
                (event == "mouseEnter" || event == "mouseLeave") &&
                b.getAttribute("click")
            )
                return;
            if (flag) b.style.fill = bg;
            if (a.length > 0) {
                for (let i = 0; i < a.length; i++) {
                    a[i].style.stroke = color;
                    a[i].style.strokeWidth = strokeWidth;
                    if (flag) a[i].style.fill = bg;
                }
            }
            if (d) {
                d.style.fill = bg;
                d.style.stroke = color;
                d.style.strokeWidth = strokeWidth ? "1.5px" : "";
            }
            if (c) {
                c.style.fill = bg;
                c.style.stroke = color;
                c.style.strokeWidth = strokeWidth ? "1.5px" : "";
            }
            if (e) {
                for (let i = 0; i < e.length; i++) {
                    e[i].style.fill = color;
                }
            }
        },

        /**
         * 点击svg内容
         */
        openMap(glid, eleID) {
            console.log(glid, eleID);
            if (this.selArr.length > 0) {
                this.selArr.forEach((element) => {
                    this.setEleColor(element, "#000", "click", "", "", true);
                    document.getElementById(element).removeAttribute("click");
                });
                this.selArr = [];
            }
            if (!glid && !eleID && !(eleID instanceof Array)) {
                this.setEleColor(
                    this.remeberEleId,
                    "#000",
                    "click",
                    "",
                    "",
                    true
                );
                document
                    .getElementById(this.remeberEleId)
                    .removeAttribute("click");
                this.$message({
                    message: this.$t('message.public.tip1'),
                    type: "warn",
                });
                return false;
            }
            if (eleID instanceof Array) {
                eleID.forEach((n) => {
                    let flag = n.GId.includes("group");
                    let b = document.getElementById(n.GId);
                    if (!b) return;
                    this.setEleColor(
                        n.GId,
                        "#f00",
                        "click",
                        "yellow",
                        "3px",
                        flag
                    );
                    if (flag) b.style.fill = "yellow";
                    let c = b.querySelector("ellipse");
                    let d = b.querySelector("rect");
                    if (c) {
                        c.style.fill = "yellow";
                    } else if (d) {
                        d.style.fill = "yellow";
                    }
                    document.getElementById(n.GId).setAttribute("click", true);
                    this.selArr.push(n.GId);
                });
            } else {
                let flag = eleID.includes("group");
                this.remeberEleId = eleID;
                this.svgZoom.scaleCenterID = eleID;
                if (this.selArr.length > 0) {
                    this.selArr.forEach((element) => {
                        if (element != eleID) {
                            this.setEleColor(
                                element,
                                "#000",
                                "click",
                                "",
                                "",
                                true
                            );
                            document
                                .getElementById(element)
                                .removeAttribute("click");
                        }
                    });
                    this.selArr.shift();
                }
                let b = document.getElementById(eleID);
                if (!b) return;
                this.setEleColor(eleID, "#f00", "click", "yellow", "3px", flag);
                if (flag) b.style.fill = "yellow";
                let c = b.querySelector("ellipse");
                let d = b.querySelector("rect");
                if (c) {
                    c.style.fill = "yellow";
                } else if (d) {
                    d.style.fill = "yellow";
                }
                document.getElementById(eleID).setAttribute("click", true);
                this.selArr.push(eleID);
                // this.zoomToEle(glid);
            }

            this.selectElement = { glid, eleID };
        },

        /**
         * hover svg内容
         */
        showtag(glid, eleID) {
            this.setEleColor(
                eleID,
                "#f00",
                "mouseEnter",
                "yellow",
                "3px",
                eleID.includes("group")
            );
        },

        /**
         * remove hover
         */
        hidetag(glid, eleID) {
            this.setEleColor(
                eleID,
                "#000",
                "mouseLeave",
                "",
                "",
                eleID.includes("group")
            );
        },
    },

    created() {
        window.svgFUNC = {
            cTDG: this.openMap,
            mTDG: this.showtag,
            lTDG: this.hidetag,
        };
        window.SVGDATA = {
            scale: 100,
        };
        this.svgCurrentScale = window.SVGDATA;
    },

    mounted() {
        //     "https://api.richtechcn.com/Upload/Svg/D-MFS-020366-100-11.svg"
        this.readXML(
            //     "https://api.richtechcn.com/Upload/Svg/D-MFS-020366-100-11.svg"
            "https://demoapi.richtechcn.com\\Cause\\Svg\\D-MFS-020366-100-12.svg"
        );
    },

    updated: function () {
        this.$nextTick(function () {
            if (!this.svgZoom && this.svgData) {
                const zoom = $solway_z.zoom({
                    ele: document.getElementById("zoomSvg"),
                    scale: 1,
                    minScale: 1,
                    maxScale: this.maxScale,
                    scaleCenter: "",
                });
                this.svgZoom = zoom;
                // document.getElementById(this.scaleCenterID).style.stroke = 'red;'
                zoom.scale(0);
            }
        });
    },
};
</script>

<style lang="scss" scoped>
.root-lay {
    width: calc(100% - 192px);
    height: 100%;
}

.title-view {
    width: calc(100%);
    background: #f8f8f8;
    border-bottom: 1px solid #e1e1e1;
    margin-left: 24px;

    .top-tab {
        display: flex;
        width: 100%;
        height: 55px;
    }

    .btn-box {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .top-btn-view {
        height: 40px;
        display: flex;
        align-content: center;
        justify-content: space-between;

        .tab-btn {
            min-width: 60px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            color: rgba(0, 0, 0, 0.65);
            margin-right: 2px;
            border-radius: 2px;
            transition: 0.5s;
        }

        .tab-btn:hover {
            background: rgba(33, 61, 73, 0.05);
        }

        .downBtnActive {
            background: rgba(33, 61, 73, 0.05);
        }
    }

    .bottom {
        width: calc(100% - 256px);
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        // margin-left: 120px;
        .bottom-left-view {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 40px;
        }

        .bottom-right-view {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 40px;

            button {
                min-width: 52px;
                height: 24px;
                border-radius: 4px;
                border: 1px solid #d3d3d3;
                margin-left: 16px;
            }

            .bg-bottom-btn {
                background: #106ebe;
                color: #ffffff;
                padding: 0 8px;
            }

            .edit-btn {
                color: #fff;
                background: #bc000f;
                border: 0 none;
            }
        }

        .b-input {
            display: flex;
            align-items: center;
            height: 100%;
            margin-right: 24px;

            .b-input-label {
                font-size: 14px;
                color: rgba(0, 0, 0, 0.85);
                height: 24px;
                line-height: 24px;
            }

            .selectInput {
                width: 224px;
                height: 24px;
            }

            .selectInputlong {
                width: 384px;
                margin-left: 8px;

                ::v-deep .el-input__inner {
                    width: 384px;
                }
            }

            ::v-deep .el-input__inner {
                width: 224px;
                height: 24px;
                color: rgba(0, 0, 0, 0.65);
                background: #f8f8f8;
            }

            ::v-deep .el-input__icon {
                line-height: 24px;
            }
        }
    }
}

.content-container {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: calc(100% - 40px);

    .left-conent {
        position: relative;
        width: 300px;
        height: 100%;
        box-sizing: border-box;
    }

    .svg_content {
        position: relative;
        width: calc(100% - 300px);
        height: calc(100% - 48px);
        margin: 24px;
        margin-left: 0px;
        box-sizing: border-box;
        background-color: #fff;
        border: 1px solid #1f1f1f;
        position: relative;
        overflow: hidden;

        .circle-test {
            display: block;
            position: absolute;
            height: 10px;
            width: 10px;
            background: green;
            top: 50%;
            left: 50%;
            border-radius: 50%;
        }

        .draggable {
            width: 100% !important;
            height: 100% !important;
        }

        #dragDiv {
            background-color: #fff;
            width: 100%;
            box-sizing: border-box;
        }

        .right-view {
            position: absolute;
            right: 0px;
            top: 0px;
            height: 100%;
            width: 300px;
            background-color: #fff;
        }
    }

    .foot_btn {
        background: #323a45;
        width: 140px;
        height: 32px;
        display: flex;
        align-items: center;
        margin: 10px auto;
        color: #fff;
        justify-content: space-around;
        box-shadow: 0 1px 9px rgba(0, 0, 0, 0.3);
        border-radius: 4px;
        position: absolute;
        bottom: 30px;
        right: 0;
        left: 0;

        span {
            text-decoration: underline;
            cursor: pointer;
        }

        i {
            font-size: 20px;
            cursor: pointer;
        }

        .disable {
            color: #93abcc;
        }
    }
}
</style>